<template>
  <n-space vertical :size="12">
    <n-data-table
      id="table"
      :bordered="false"
      :single-line="false"
      :columns="columns"
      :data="data"
      :pagination="pagination"
    />
  </n-space>
</template>

<script>
import { h, defineComponent, toRefs, toRef, onMounted } from 'vue'
import { NTag, NButton, useMessage } from 'naive-ui'
import { ref } from 'vue'
import { toRaw } from '@vue/reactivity'
import { searchHistory } from '@/api/post'
import { createLocalStorage } from '@/utils/cache'
const createColumns = ({ sendMail }) => {
  return [
    {
      title: '任务状态',
      key: 'status1',
      // render(row) {
      //   const tags = row.tags.map((tagKey) => {
      //     return h(
      //       NTag,
      //       {
      //         style: {
      //           marginRight: '6px',
      //         },
      //         type: 'info',
      //       },
      //       {
      //         default: () => tagKey,
      //       }
      //     )
      //   })
      //   return tags
      // },
    },
    {
      title: '任务名称',
      key: 'task_name',
    },
    {
      title: '任务类型',
      key: 'type1',
    },
    {
      title: '可提交(次)',
      key: 'times',
    },
    {
      title: '金额',
      key: 'account',
    },
    {
      title: '日期',
      key: 'create_at',
    },

    {
      title: '操作',
      key: 'actions',
      render(row) {
        return h(
          NButton,
          {
            size: 'small',
            onClick: () => sendMail(row),
          },
          { default: () => '打开' }
        )
      },
    },
  ]
}

// const createData = () => [
//   {
//     key: 0,
//     task_name: '垃圾回收',
//     task_type: '分类',
//     times: '1',
//     account: 1,
//     date: '2022-01-01',
//     tags: ['nice'],
//   },
//   {
//     key: 1,
//     task_name: '商品识别',
//     task_type: '打框',
//     times: '2',
//     account: 2,
//     date: '2022-01-02',
//     tags: ['wow'],
//   },
//   {
//     key: 2,
//     task_name: '人脸识别',
//     task_type: '打点',
//     times: '2',
//     account: 3,
//     date: '2022-01-03',
//     tags: ['cool'],
//   },
// ]

export default defineComponent({
  // props: ['tasks'],
  // setup(props) {
  setup() {
    onMounted(() => {
      const ls = createLocalStorage({ prefixKey: 'login_' })
      const user = ls.get('loginInfo')
      // console.log(user.userid)
      search(user.userid)
    })
    const hhtasks = ref([
      // {
      //   create_at: null,
      //   task_name: 'lbj',
      //   description:
      //     '立长但内近百下政门工保电经。都快联律离十且华西下音着真国林据。斗周电强己其酸美调第构品头。式近意具流从文或深当矿因当化七。',
      //   status: '0',
      //   account: 1,
      //   type: '2',
      //   path: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F21031FKU44S6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656723242&t=e84685c9a7badca4e7014287eb91f8ed',
      //   task_id: 2,
      // },
      // {
      //   create_at: null,
      //   task_name: 'ht',
      //   description:
      //     '立长但内近百下政门工保电经。都快联律离十且华西下音着真国林据。斗周电强己其酸美调第构品头。式近意具流从文或深当矿因当化七。',
      //   status: '1',
      //   account: null,
      //   type: '1',
      //   path: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F210924233115O14-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656723242&t=7fa47b53f0e7cda6ece74c31c6de7d52',
      //   task_id: 1,
      // },
    ])
    async function search(id) {
      const res = await searchHistory({
        userid: id,
      })
      hhtasks.value = res
      console.log('hhtasks1')
      console.log(hhtasks.value)
      let tasks = toRaw(hhtasks)
      for (let i in tasks.value) {
        console.log(tasks.value[i])
        tasks.value[i].type1 = types[tasks.value[i].type] //中文type
        tasks.value[i].status1 = statuss[tasks.value[i].status] //中文status
      }
    }

    const types = ['所有', '分类', '打点', '打框']
    const statuss = ['所有', '已完成', '稽核中', '校验中']
    console.log('hhtasks.value')
    console.log(hhtasks.value)
    let tasks = toRaw(hhtasks)
    console.log('tasks.value')
    console.log(tasks.value)
    console.log('遍历')
    // for (let i in tasks.value) {
    //   console.log(tasks.value[i])
    //   tasks.value[i].type1 = types[tasks.value[i].type] //中文type
    //   tasks.value[i].status1 = statuss[tasks.value[i].status] //中文status
    // }
    for (let i in tasks.value) {
      console.log(tasks.value[i])
      tasks.value[i].type1 = types[tasks.value[i].type] //中文type
      tasks.value[i].status1 = statuss[tasks.value[i].status] //中文status
    }
    // console.log(createData())
    const message = useMessage()
    return {
      data: tasks,
      columns: createColumns({
        sendMail(rowData) {
          console.log(1111111111111111)
          message.info('send mail to ' + rowData.task_id)
          if (rowData.type == 2) {
            window.open('http://192.168.175.1:8080/mark2/?task_id=' + rowData.task_id)
          } else if (rowData.type == 1) {
            window.open('http://192.168.175.1:8080/mark3/?task_id=' + rowData.task_id)
          } else if (rowData.type == 3) {
            window.open('http://192.168.175.1:8080/mark4/?task_id=' + rowData.task_id)
          }
        },
      }),
      pagination: {
        pageSize: 10,
      },
    }
  },
})
</script>

<style lang="scss" scoped>
#table {
  width: 90%;
}
</style>
